<template>
  <div id="stepone">
  <v-container>
  <v-row class="lg-12 pl-2">
    <v-col lg="4"
    >
      <v-text-field
              label="Deployment Name" v-model="params.deployment_name"
      ></v-text-field>
    </v-col>
    <v-col lg="4"
    ><v-select
          :items="items"
          label="Namespace"
          v-model="params.namespace"
      ></v-select>
    </v-col>
    <v-col lg="4">
    <v-radio-group
      v-model="params.deployment_type"
      row
    >
      <v-radio
        label="Edge"
        value="1"
      ></v-radio>
      <v-radio
        label="Cloud"
        value="0"
      ></v-radio>
    </v-radio-group>
      </v-col>
    </v-row>
    <v-row class="lg-12 pl-2">
          <v-col lg="4"
    >
      <v-text-field
              label="Replicas" v-model="params.replica" type="number"
      ></v-text-field>
    </v-col>
    </v-row>
  </v-container>
</div>
</template>

<script>

import { mapState, mapActions } from 'vuex'
import {validationMixin} from 'vuelidate'
import {required} from 'vuelidate/lib/validators'
export default {
    props: ['clickedNext', 'currentStep'],
    mixins: [validationMixin],
    data: () => ({
            items: ['Default', 'Kube-System', 'Edge'],
            params: {
                deployment_name: '',
                namespace: '',
                deployment_type: '',
                replica: ''
            }
        }),
    validations: {
        params: {
            deployment_name: {
                required
            },
            namespace: {
                required,
            },
            deployment_type: {
                required
            },
            replica: {
                required
            }
        }
    },
    watch: {
        $v: {
            handler: function (val) {
                if(!val.$invalid) {
                    this.$emit('can-continue', {value: true});
                    console.log("update_params:" + JSON.stringify(this.params))
                    this.create_params(this.params)
                } else {
                    this.$emit('can-continue', {value: false});
                    setTimeout(()=> {
                        this.$emit('change-next', {nextBtnValue: false});
                    }, 3000)
                }
            },
            deep: true
        },
    },
    methods: {
        ...mapActions(
            'deployment', ['create_params']
        ),
    },
    mounted() {
        if(!this.$v.$invalid) {
            this.$emit('can-continue', {value: true});
        } else {
            this.$emit('can-continue', {value: false});
        }
    }
}
</script>
<style>
    #stepone .container {
        min-height: 360px;
        max-height: 360px;
        overflow-y: scroll;
    }
</style>